<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 左右对称 -->
        <TreeTool
          :tree-node="company"
          :is-root="true"
        ><el-dropdown-item
          @click.native="addDepartmentById(company)"
        >添加子部门</el-dropdown-item>
        </TreeTool>
        <!-- 树状结构数据 -->
        <el-tree
          :data="departs"
          :props="defaultProps"
          :default-expand-all="true"
        >
          <TreeTool slot-scope="{ data }" :tree-node="data">
            <el-dropdown-item
              @click.native="addDepartmentById(data)"
            >添加子部门</el-dropdown-item>
            <el-dropdown-item
              @click.native="editDepartmentById(data)"
            >编辑部门</el-dropdown-item>
            <el-dropdown-item
              @click.native="delDepartmment(data)"
            >删除部门</el-dropdown-item>
          </TreeTool>
        </el-tree>
        <!--  -->
        <AddDept
          ref="addForm"
          :showdialog="showDialog"
          :current-node="node"
          :visible.sync="showDialog"
          @updata:getDepartments="getDepartments"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import TreeTool from './components/Tree-tools/index.vue'
import AddDept from './components/add-dept'
import { delDepartmentById, getDepartments } from '@/api/departments.js'
// 导入 扁平化 数据 转化成 tree状结构
import { transListToTreeData } from '@/utils/index.js'
export default {
  name: 'Departments',
  components: { TreeTool, AddDept },
  props: {},
  data() {
    return {
      // 添加 部门 弹出框 的显示 状态
      showDialog: false,
      // 点击的 当前 部门 对象数据
      node: null,
      company: { name: '', manager: '负责人', id: '' },
      departs: [],
      defaultProps: {
        label: 'name' // 表示 从这个属性显示内容
      }
    }
  },
  created() {
    this.getDepartments()
  },
  mounted() {},
  methods: {
    // 请求回来的 公司部门的数据 并且 对于 扁平化 数据进行处理
    async getDepartments() {
      const result = await getDepartments()
      this.company.name = result.companyName
      this.departs = transListToTreeData(result.depts, '')
    },
    // 删除 对应的 公司 部门
    delDepartmment(data) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: async(action) => {
          console.log(action)
          try {
            if (action === 'confirm') {
              console.log('成功')
              await delDepartmentById(data.id)
              // 重新加载页面
              this.getDepartments()
            }
          } catch (error) {
            console.log(error)
          }
        }
      })
    },
    // 添加 子部门  打开子部门 弹出框并且 将当前点击的 对象 进行保存
    addDepartmentById(currentNode) {
      this.showDialog = true
      // 保存 当前 的点击 对象 数据
      this.node = currentNode
    },
    // 添加 子部门  打开子部门 弹出框并且 将当前点击的 对象 进行保存
    async editDepartmentById(currentNode) {
      this.showDialog = true
      this.$refs.addForm.getDepartment(currentNode)
      // 保存 当前 的点击 对象 数据
      this.node = currentNode
      //
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
